<template>
  <div class="report-container">
    <div class="patient-health-report">
    <!-- 头部区域 -->
    <div class="report-header">
      <h2><el-icon><Monitor /></el-icon> 我的健康评估报告</h2>
      <div class="header-actions">
        <el-button type="primary" @click="refreshReport">
          <el-icon><Refresh /></el-icon> 刷新报告
        </el-button>
        <el-date-picker
            v-model="reportDate"
            type="date"
            placeholder="选择报告日期"
            format="YYYY年MM月DD日"
            value-format="YYYY-MM-DD"
            @change="loadReportData"
            style="width: 200px; margin-left: 10px;"
        />
      </div>
    </div>

    <!-- 报告基本信息 -->
    <el-card class="report-meta">
      <div class="meta-content">
        <div class="meta-item">
          <span class="label">报告日期：</span>
          <span class="value">{{ reportDate }}</span>
        </div>
        <div class="meta-item">
          <span class="label">评估状态：</span>
          <el-tag type="success" class="status-tag">已完成</el-tag>
        </div>
      </div>
    </el-card>

    <!-- 健康指标 -->
    <el-card class="health-indicators">
      <template #header>
        <div class="card-header">
          <el-icon><DataLine /></el-icon> 健康指标
        </div>
      </template>
      <div class="indicators-list">
        <div v-for="(item, index) in indicators" :key="index" class="indicator-item">
          <div class="indicator-name">{{ item.name }}</div>
          <div class="indicator-value">
            <span class="value">{{ item.value }}</span>
            <span class="unit">{{ item.unit }}</span>
          </div>
          <div class="indicator-status">
            <el-tag :type="getStatusType(item.status)" size="small">
              {{ item.status }}
            </el-tag>
          </div>
          <div class="indicator-range">参考范围: {{ item.range }}</div>
        </div>
      </div>
    </el-card>

    <!-- 健康建议 -->
    <el-card class="health-suggestions">
      <template #header>
        <div class="card-header">
          <el-icon><Document /></el-icon> 健康建议
        </div>
      </template>
      <div class="suggestions-content">
        <div class="suggestion-section">
          <div class="suggestion-title">
            <el-icon><Sunny /></el-icon> 生活方式建议
          </div>
          <ul class="suggestion-list">
            <li>保持规律作息，每天保证7-8小时睡眠</li>
            <li>每周至少进行150分钟中等强度运动</li>
            <li>减少久坐时间，每小时起身活动5分钟</li>
          </ul>
        </div>
        <div class="suggestion-section">
          <div class="suggestion-title">
            <el-icon><Food /></el-icon> 饮食建议
          </div>
          <ul class="suggestion-list">
            <li>增加蔬菜水果摄入，每天500克以上</li>
            <li>减少高盐高糖高脂食物摄入</li>
            <li>每天饮水1500-2000毫升</li>
          </ul>
        </div>
      </div>
    </el-card>

    <!-- 指标趋势图 -->
    <el-card class="trend-chart">
      <template #header>
        <div class="card-header">
          <el-icon><TrendCharts /></el-icon> 指标趋势
        </div>
      </template>
      <div class="chart-container">
        <div class="chart-selector">
          <el-select v-model="selectedIndicator" placeholder="选择指标">
            <el-option
                v-for="item in indicators"
                :key="item.name"
                :label="item.name"
                :value="item.name"
            />
          </el-select>
        </div>
        <div class="chart-content">
          <div ref="chart" class="chart"></div>
        </div>
      </div>
    </el-card>
  </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import {
  Monitor, Refresh, DataLine, Document, Sunny, Food, TrendCharts
} from '@element-plus/icons-vue'

const reportDate = ref('2023-11-15')
const selectedIndicator = ref('血压')
const chart = ref(null)

const indicators = ref([
  { name: '血压', value: '120/80', unit: 'mmHg', range: '90-140/60-90', status: '正常' },
  { name: '心率', value: '72', unit: '次/分', range: '60-100', status: '正常' },
  { name: '血糖', value: '5.2', unit: 'mmol/L', range: '3.9-6.1', status: '正常' },
  { name: '胆固醇', value: '4.8', unit: 'mmol/L', range: '2.8-5.2', status: '正常' },
  { name: 'BMI', value: '22.5', unit: 'kg/m²', range: '18.5-24', status: '正常' }
])

const getStatusType = (status) => {
  switch(status) {
    case '正常': return 'success'
    case '偏高': return 'warning'
    case '偏低': return 'warning'
    default: return 'danger'
  }
}

const refreshReport = () => {
  // 模拟刷新数据
  console.log('刷新报告数据')
}

const loadReportData = () => {
  // 根据日期加载报告数据
  console.log('加载报告数据:', reportDate.value)
}

const initChart = () => {
  const chartInstance = echarts.init(chart.value)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 118, 125, 122, 119, 123, 120],
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 3,
        color: '#409EFF'
      },
      itemStyle: {
        color: '#409EFF'
      }
    }]
  }
  chartInstance.setOption(option)
}

onMounted(() => {
  initChart()
})
</script>

<style scoped>
.patient-health-report {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.report-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
}

.report-header .el-icon {
  margin-right: 8px;
}

.header-actions {
  display: flex;
  align-items: center;
}

.report-meta {
  margin-bottom: 20px;
}

.meta-content {
  display: flex;
  gap: 30px;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-item .label {
  margin-right: 8px;
  color: #666;
}

.card-header {
  font-weight: bold;
  display: flex;
  align-items: center;
}

.card-header .el-icon {
  margin-right: 8px;
}

.indicators-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}

.indicator-item {
  padding: 15px;
  border-radius: 4px;
  background-color: #f8f8f8;
}

.indicator-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.indicator-value {
  display: flex;
  align-items: baseline;
  margin-bottom: 5px;
}

.indicator-value .value {
  font-size: 18px;
  font-weight: bold;
  margin-right: 5px;
}

.indicator-value .unit {
  font-size: 12px;
  color: #999;
}

.indicator-range {
  font-size: 12px;
  color: #999;
}

.status-tag {
  min-width: 50px;
  text-align: center;
}

.health-suggestions {
  margin-bottom: 20px;
}

.suggestions-content {
  padding: 10px 0;
}

.suggestion-section {
  margin-bottom: 20px;
}

.suggestion-title {
  display: flex;
  align-items: center;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.suggestion-title .el-icon {
  margin-right: 8px;
  font-size: 18px;
}

.suggestion-list {
  padding-left: 20px;
  margin: 0;
}

.suggestion-list li {
  margin-bottom: 8px;
  color: #666;
  line-height: 1.5;
}

.trend-chart {
  margin-bottom: 20px;
}

.chart-container {
  width: 100%;
}

.chart-selector {
  margin-bottom: 15px;
}

.chart-content {
  height: 400px;
}

.chart {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .indicators-list {
    grid-template-columns: 1fr;
  }

  .meta-content {
    flex-direction: column;
    gap: 10px;
  }
}
</style>
